<template>
    <div>
      <el-form inline>
        <el-form-item label="选择模型">
          <el-select v-model="selectedModelId" placeholder="请选择">
            <el-option
              v-for="m in models"
              :key="m.id"
              :label="m.name"
              :value="m.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div v-if="showForm" style="margin: 20px 0;">
        <el-form label-width="120px">
          <el-form-item label="学习率">
            <el-input-number v-model="form.learning_rate" :step="0.01" :min="0.01" :max="1" />
          </el-form-item>
          <el-form-item label="树的数量">
            <el-input-number v-model="form.n_estimators" :min="10" :max="1000" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="startTuning">启动自动调优</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-divider>调优任务记录</el-divider>
      <el-table :data="tuningTasks" style="width: 100%;">
        <el-table-column prop="modelName" label="模型" />
        <el-table-column prop="params.learning_rate" label="学习率" />
        <el-table-column prop="params.n_estimators" label="树的数量" />
        <el-table-column prop="status" label="状态" />
        <el-table-column prop="result" label="结果" />
        <el-table-column prop="time" label="时间" />
      </el-table>
    </div>
  </template>
  
  <script>
  import { Message } from 'element-ui';
  export default {
    name: 'TuningPanel',
    props: ['models', 'tuningTasks'],
    data() {
      return {
        selectedModelId: '',
        form: {
          learning_rate: 0.1,
          n_estimators: 100
        },
        showForm: false
      };
    },
    watch: {
      selectedModelId(val) {
        const model = this.models.find(m => m.id === val);
        if (model && model.type === 'XGBoost') {
          this.form.learning_rate = model.params.learning_rate;
          this.form.n_estimators = model.params.n_estimators;
          this.showForm = true;
        } else {
          this.showForm = false;
        }
      }
    },
    methods: {
      startTuning() {
        if (!this.selectedModelId) {
          Message.warning('请选择模型');
          return;
        }
        this.$emit('start-tuning', {
          modelId: this.selectedModelId,
          params: { ...this.form }
        });
      }
    }
  };
  </script>